<template>
  <Dialog @close="handleMoreVotesDialogClose"
          :show="showMoreVotesDialog">
    <div class="more-votes-content"
         :class="showMoreVotesDialog?'show':'hide'">
      <div class="item flex align-center ">
        <img src="@/assets/img/app_one.png">
        <div class="item-right flex align-center justify-between  flex-1">
          <div class="item-label">去APP内，多祝福一次</div>
          <div class="item-button">打开APP</div>
        </div>
      </div>
      <div class="item flex align-center ">
        <img src="@/assets/img/app_two.png">
        <div class="item-right flex align-center justify-between  flex-1">
          <div class="item-label">每发1单，可多祝福3次
            每日最多增加6次</div>
          <div class="item-button">打开APP</div>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script>
import Dialog from "@/components/dialog/dialog"
export default {
  components: {
    Dialog
  },
  props: {
    showMoreVotesDialog: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleMoreVotesDialogClose() {
      this.$emit("close")
    }
  }
}
</script>

<style lang="scss" >
.more-votes-content {
  width: 100%;
  padding: 72px 0px 48px 40px;
  background-color: #fff;
  border-radius: 16px 16px 0px 0px;
  position: absolute;
  left: 0;
  bottom: 0;

  &.hide {
    animation: MoreVoteHide 0.6s forwards;
  }
  &.show {
    animation: MoreVoteShow 0.6s forwards;
  }
  @keyframes MoreVoteShow {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes MoreVoteHide {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100%);
    }
  }

  .item {
    & > img {
      width: 100px;
      height: 100px;
      margin-right: 24px;
    }
    &:last-child .item-right {
      border-bottom: none;
    }
    .item-right {
      height: 148px;
      border-bottom: 1px solid #efefef;
      padding-right: 40px;

      .item-label {
        width: 313px;
        font-size: 30px;
        font-family: AlibabaPuHuiTiR;
        color: #333333;
        line-height: 42px;
      }
      .item-button {
        width: 136px;
        height: 60px;
        background: #ff9742;
        border-radius: 30px;
        font-size: 28px;
        font-family: AlibabaPuHuiTiR;
        color: #ffffff;
        line-height: 60px;
        text-align: center;
      }
    }
  }
}
</style>